.headline {
  margin-bottom: 2rem;
}

.category {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--ifm-color-primary-light);

  &:before {
    content: '#';
    display: inline;
    margin-right: 0.25rem;
  }
}

.title {
  max-width: 500px;
  font-size: 2rem;
  line-height: initial;
  word-spacing: -0.25rem;

  @media screen and (min-width: 576px) {
    font-size: 2.8rem;
  }
}

.titleGradient {
  @extend .title;

  background: -webkit-linear-gradient(
    var(--ifm-color-primary-light),
    var(--ifm-color-primary-dark)
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;

  html[data-theme='dark'] & {
    background: -webkit-linear-gradient(
      var(--ifm-color-primary-lightest),
      var(--ifm-color-primary)
    );
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
